<template>
    <div class="phone-bg">
        <div class="phone-box1">
            <div class="img-box">
                <!-- <img src="/img/phone1.png" alt=""> -->
            </div>
            <p>无边有界，天水交融。向前一步，海阔天空。</p>
            <div class="phone-bottom">
                <div class="circle1">
                    <div class="circle"></div>
                    <p>海阔天空</p>
                </div>
                <div class="circle2">
                    <div class="circle"></div>
                    <p>大漠银月</p>
                </div>
                <div class="circle3">
                    <div class="circle"></div>
                    <p>松影墨韵</p>
                </div>
            </div>
        </div>
        <div class="phone-box2"></div>
    </div>
</template>

<style lang="scss" scoped>
.phone-bg {
    padding: 80px 66px;
    background-color: #000;
    display: flex;
    justify-content: space-between;
}

.phone-box1 {
    background-color: #201f1c;
    width: 656px;
    height: 680px;
    padding: 48px 32px;
    box-sizing: border-box;

    .img-box {
        width: 560px;
        height: 360px;
        background-color: #D9D9D9;
        background-image: url(/img/phone1.png);
        background-repeat: no-repeat;
        background-size: 220px;
        background-position: 185px 40px;
        margin-bottom: 40px;
    }

    p {
        color: #fff;
        font-size: 16px;
    }

}

.phone-bottom {
    display: flex;
    cursor: pointer;
    margin-top: 107px;
}
.circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin: 0 16px 8px 16px;
}

.circle1 .circle {
    background-image: linear-gradient(#566078, #353e56);
}

.circle1 {
    .circle::after{
        content: '';
        width: 38px;
        height: 38px;
        transform: translate(-4px, -4px);
        display: inline-block;
        border-radius: 50%;
        border: 1px solid #566078;
    }
}

.circle2 .circle {
    background-image: linear-gradient(#c0835a, #A26036);
}

.circle3 .circle {
    background-image: linear-gradient(#494949, #111111);
}

.circle2 {
    margin: 0 20px;
}

.phone-box2 {
    background-color: bisque;
    width: 656px;
    height: 680px;
    background-image: url(/img/phone2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
</style>